// 实现Message方法
// createVNode -> v3提供 给开发者抛出
// render -> 可以把虚拟dom渲染为真实dom

import { createVNode, render } from 'vue'

// 实现步骤：
// 1. 函数的架子实现
// 2. 渲染Message组件
// 2.1 以Message组件为参数调用createVNode生成一个虚拟dom 并且传入props
// 2.2 使用render挂载函数对虚拟dom进行挂载渲染 [准备一个挂载的位置！！]

import _Message from './index.vue'
function Message ({ type, text }) {
  // 生成一个vnode
  const messageVNode = createVNode(
    _Message,
    { type, text }// props参数
  )
  // 新增一个可以挂载的位置  body末尾新增一个div
  const div = document.createElement('div')
  document.body.appendChild(div)

  // render实现渲染
  render(messageVNode, div)

  // 1.5s之后隐藏
  setTimeout(() => {
    render(null, div)
  }, 1500)
}

export default Message
